<template>
	<view class="g-register-main">
		<view class="g-form-main">
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_name.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="text" v-model="dataForm.username" @input="usernameInputHandler" placeholder="请输入姓名" class="f-f1" placeholder-style="color: #C5C5C5" />
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_company.png" mode="aspectFit" class="icon f-mr10"></image>
				<input
					type="text"
					v-model="dataForm.company"
					placeholder="请输入公司名称"
					class="f-f1"
					placeholder-style="color: #C5C5C5"
					@input="companyInpHandler"
					@blur="companyShow = false"
				/>
				<!-- <text class="icon-right f-fc-c5"></text> -->

				<view class="g-company f-bc-whilte" :class="[companyShow ? 'show' : '']">
					<scroll-view scroll-y="true" class="g-company-content">
						<view class="u-company-item" v-for="(item, index) in companies" :key="index" @tap="selectCompany(item)">{{ item.name }}</view>
					</scroll-view>
				</view>
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_iphone.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="number" v-model="dataForm.phone" maxlength="11" placeholder="请输入手机号" class="f-f1" placeholder-style="color: #C5C5C5" />
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_msg.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="number" v-model="dataForm.message" placeholder="请输入短信验证码" class="f-f1" placeholder-style="color: #C5C5C5" />
				<send-msg-btn :phone="dataForm.phone"></send-msg-btn>
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_psw_grey.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="password" v-model="dataForm.password" placeholder="请输入密码,长度6-20位" class="f-f1" placeholder-style="color: #C5C5C5" />
			</view>
		</view>
		<view class="u-form-desc f-frowceny f-fz12 f-fc-inp">
			<checkbox-group @change="changeHandler">
				<label class="f-frowceny">
					<checkbox :value="true" color="#FFFFFF" class="f-mr10" />
					<view class="f-frowceny">
						<text>阅读并同意</text>
						<view class="f-fc-blue f-tap-view" @tap.stop="toRuleInfo('车是家服务协议')">《车是家服务协议》</view>
						<text>及</text>
						<view class="f-fc-blue f-tap-view" @tap.stop="toRuleInfo('隐私政策')">《隐私政策》</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<button class="u-register-btn u-btn-primary f-fz16 f-fc-whilte f-fw650 f-bdr-scircle" :disabled="disabled" @tap="submitForm">注 册</button>
	</view>
</template>

<script>
import userApi from '../../api/user.js';
import submitFormMix from '../../mixins/submit.js';
import form from '../../util/form.js';
import util from '../../util/util.js';
import MD5Util from '../../libs/md5.js';
export default {
	mixins: [submitFormMix],
	data() {
		return {
			dataForm: {
				username: '', // 姓名
				company: '', // 公司名称
				phone: '', // 手机号
				message: '', // 短信
				password: '', // 密码
				isReadRule: false // 是否同意协议
			},
			rules: [
				{
					name: 'username',
					rule: ['required', 'minLength:2', 'maxLength:10'],
					msg: ['请输入姓名', '姓名应在2-10位之间', '姓名应在2-10位之间']
				},
				{
					name: 'company',
					rule: ['required', 'minLength:2', 'maxLength:20'],
					msg: ['请选择公司', '公司应在2-20位之间', '公司应在2-20位之间']
				},
				{
					name: 'phone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号', '请输入正确的手机号']
				},
				{
					name: 'message',
					rule: ['required'],
					msg: ['请输入短信']
				},
				{
					name: 'password',
					rule: ['required', 'isEnAndNo'],
					msg: ['请输入密码', '密码必须是8~20位数字和字母组合']
				},
				{
					name: 'isReadRule',
					rule: ['isTrue'],
					msg: ['请阅读并同意相关协议']
				}
			],
			companies: [],
			sendMessageSec: 0, // 发送验证码读秒
			companyShow: false
		};
	},
	methods: {
		/**
		 * 用户名输入处理函数
		 * */

		usernameInputHandler(event) {
			const that = this;
			let time = setTimeout(() => {
				that.dataForm.username = event.detail.value.replace(/\s/g, '');
				clearTimeout(time);
			}, 0);
		},

		/**
		 * 公司输入处理函数
		 * */

		companyInpHandler(event) {
			const that = this;
			let name = event.detail.value;
			if (name) that.throttle(that.getCompany, null, 1000, [name]);
		},

		/**
		 * 查询公司名称
		 * */

		getCompany(name) {
			const that = this;
			userApi.getCompany(name).then(res => {
				that.companies = res.data;
				if (res.data.length != 0) that.companyShow = true;
			});
		},

		/**
		 * 选择公司
		 * */

		selectCompany(item) {
			const that = this;
			that.dataForm.company = item.name;
		},

		/**
		 * 改变是否已读协议处理函数
		 * */

		changeHandler(event) {
			this.dataForm.isReadRule = Boolean(event.detail.value[0]);
		},

		/**
		 * 去协议页面
		 * */

		toRuleInfo(title) {
			uni.navigateTo({
				url: `/pages/ruleInfo/ruleInfo?title=${title}`
			});
		},

		/**
		 * 提交表单
		 * */

		submitForm(callBack) {
			const that = this;
			let params = that.deleteProperty(that.dataForm, ['message', 'isReadRule']);
			params.password = MD5Util.hexMD5(params.password);
			userApi
				.regist(params)
				.then(res => {
					uni.showToast({
						icon: 'none',
						title: '注册成功，请等待系统审核',
						mask: true,
						duration: 1000
					});
					that.throttle(
						() => {
							uni.navigateBack();
						},
						null,
						1000,
						null
					);
					callBack();
				})
				.catch(() => {
					callBack();
				});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
$width: 640rpx;
.g-register-main {
	.g-form-main {
		.u-form-item {
			width: $width;
			height: 96rpx;
			margin: 26rpx auto 0;
			border-bottom: 2rpx solid #e7e7e7;
			position: relative;
			.icon {
				width: 30rpx;
				height: 30rpx;
			}
			.g-company {
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 11;
				width: 100%;
				height: 0;
				overflow: hidden;
				transition: 0.3s all;
				.g-company-content {
					height: 260rpx;
					padding: 0 40rpx;
					.u-company-item {
						height: 80rpx;
						line-height: 80rpx;
					}
				}
			}
			.g-company.show {
				height: 260rpx;
				box-shadow: 1px 7px 10px 0px rgba(206, 206, 206, 0.38);
			}
		}
	}
	.u-form-desc {
		width: $width;
		margin: 40rpx auto 0;
		.f-tap-view {
			padding: 20rpx 0;
		}
	}
	.u-register-btn {
		width: $width;
		margin-top: 120rpx;
	}
}
</style>
<style>
.g-register-main checkbox .wx-checkbox-input,
.g-register-main checkbox .uni-checkbox-input {
	width: 36rpx;
	height: 36rpx;
	background-color: #f1f1f1 !important;
	border: none;
	text-align: center;
}
.g-register-main checkbox::before {
	display: none;
}
.g-register-main checkbox[checked]::before {
	display: block;
}
.g-register-main checkbox[checked] .wx-checkbox-input,
.g-register-main checkbox[checked] .uni-checkbox-input {
	background-color: #ff1e12 !important;
	border: none;
}
</style>
